<template>
    <div class="custom-view">
      <div class="custom-view-mobile" v-if="type=='mobile' && !showComponent">
        <div class="custom-view-mobile-head">
            {{i18n('form.customPage','自定义页面') }}
        </div>
        <component v-bind:is="currentView" ref="component" ></component>
      </div>
      <!-- pc-->
      <div v-else>
        <component v-bind:is="currentView" ref="component" ></component>
      </div>
    </div>
</template>

<script>
import Vue from 'vue';
import {PublicFunction,Util} from "@lowcode/jpaas-common-lib";
import CustomPageColumnApi from '@/api/portal/core/customPageColumn'
import CustomPageTemplateApi from '@/api/portal/core/customPageTemplate'
import ShareFunction from "@/assets/js/ShareFunction";

export default {
    name: "CustomPageShow",
    props:["config",'type',"showComponent"],
    data() {
        return {
            currentView: "",
            defScript: "export default {\n" +
                "    props: {\n" +
                "    },\n" +
                "   //数据定义\n" +
                "    data(){\n" +
                "        return {\n" +
                "        }\n" +
                "    },\n" +
                "    //初始化时加载\n" +
                "    created(){\n" +
                "    },\n" +
                "    //页面自定义函数\n" +
                "    methods:{\n" +
                "    },\n" +
                "    //页面自定义观察函数\n" +
                "    watch:{}\n" +
                "}",
            customPage:"",
            viewConfig:{},
            localType:"",
        }
    },
    created() {
        this.localType=this.type || "pc";
        if(this.config && this.config.alias){
            if(this.config.type=="template"){
                this.initTemplate();
            }else {
                this.initColumn();
            }
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },
        initColumn() {
            let self_=this;
            CustomPageColumnApi.getByAlias(this.config.alias).then(res =>{
                if(!res || res.length==0){
                    return;
                }
                self_.customPage=res[0];
                //加载js
                var jsScript = "";
                var script_ = "";
                if (self_.customPage.javascript) {
                    jsScript = self_.customPage.javascript;
                } else {
                    //设置默认js
                    jsScript = self_.defScript;
                }

                jsScript=Util.replaceDefault(jsScript);

                script_ = eval('(' + jsScript + ')');
                let template=self_.localType=='pc'?self_.customPage.template:self_.customPage.mobileTemplate;
                self_.currentView = Vue.component("custom-page-view" + self_.customPage.alias, {
                    template: template,
                    //导入扩展的JS
                    mixins:[PublicFunction,ShareFunction],
                    ...script_
                });
                self_.loadStyle(self_.customPage.cssStyle);
            });
        },
        initTemplate() {
            CustomPageTemplateApi.getByAlias(this.config.alias).then(res =>{
                if(!res || res.length==0){
                    return;
                }
                this.customPage=res[0];
                //加载js
                var jsScript = "";
                var script_ = "";
                if (this.customPage.javascript) {
                    jsScript = this.customPage.javascript;
                } else {
                    //设置默认js
                    jsScript = this.defScript;
                }
                jsScript=Util.replaceDefault(jsScript);
                script_ = eval('(' + jsScript + ')');
                this.currentView = Vue.component("custom-page-view" + this.customPage.alias, {
                    template: this.localType=='pc'?this.customPage.template:this.customPage.mobileTemplate,
                    mixins:[PublicFunction,ShareFunction],
                    ...script_
                });
                this.loadStyle(this.customPage.cssStyle);
            });
        },
        loadView(viewConfig){
            this.localType=this.type || "pc";
            //加载js
            var jsScript = "";
            var script_ = "";
            if (viewConfig.jsScript) {
                jsScript = viewConfig.jsScript;
            } else {
                //设置默认js
                jsScript = this.defScript;
            }
            this.viewConfig=viewConfig;
            jsScript=Util.replaceDefault(jsScript);
            script_ = eval('(' + jsScript + ')');
            this.currentView = Vue.component("custom-page-view" , {
                template: this.localType=='pc'?viewConfig.template:viewConfig.mobileTemplate,
                mixins:[PublicFunction,ShareFunction],
                ...script_
            });
            this.loadStyle(viewConfig.cssStyle);
        },
        //加载css
        loadStyle(cssStyle) {
            var cssStyle = "<style scoped>" + cssStyle + "</style>"
            var style = "";
            var styleMath = cssStyle.match(/<style scoped>([\s\S]*)<\/style>/) || cssStyle.match(/<style>([\s\S]*)<\/style>/);
            if (styleMath != null) {
                style = styleMath[1];
            }
            var newStyle = document.getElementById("customStyle" + this.customPage.alias || "");
            if (!newStyle) {
                newStyle = document.createElement('style');
                document.getElementsByTagName('head')[0].appendChild(newStyle)
            }
            newStyle.id = "customStyle" + this.customPage.alias || "";
            newStyle.innerHTML = style;
        },
    },
    watch:{
        type:{
            handler:function (){
                this.loadView(this.viewConfig);
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.custom-view-mobile-head{
    text-align: center;
    line-height: 27px;
    border-bottom: 1px solid #dadde0;
    margin-bottom: 10px;
    color: #303030;
}
.custom-view-mobile{
  width: 380px;
  height: 700px;
  margin: auto;
  margin-top: 16px;
  background-position: center;
  background: url(../../../../../static/img/mobile.png);
  background-size: 100% 100%;
  overflow: hidden;
  padding: 50px 30px 0px 30px;
}
.custom-view{
    margin: auto;
}
</style>